<template>
    <div id="year_chart" style="width: 100%;height: 500px;"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, reactive } from 'vue';

type EChartsOption = echarts.EChartsOption;

const props = defineProps([
    'charts_data'
])

onMounted(() => {
    initCharts()
})

const option: EChartsOption = reactive({
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [],
            type: 'bar',
            showBackground: true,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }
    ]
})

const initCharts = (() => {
    (option.xAxis as any).data = props.charts_data.year;
    (option.series as any)[0].data = props.charts_data.value;
    var chartDom = document.getElementById("year_chart")!;
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
})

</script>

<style scoped>
</style>